<template>
  <view class="container">
    <!-- 用户头像区域 -->
    <view class="header-section">
      <view class="avatar-container">
        <image 
          v-if="userInfo?.avatar" 
          :src="userInfo.avatar" 
          class="user-avatar"
          mode="aspectFill"
        />
        <view v-else class="user-avatar default-avatar">
          <uni-icons type="person" size="50" color="#ffffff"></uni-icons>
        </view>
        <view class="avatar-edit" @click="changeAvatar">
          <uni-icons type="camera" size="16" color="#ffffff"></uni-icons>
        </view>
      </view>
      <view class="user-basic-info">
        <text class="user-name">{{ userInfo?.realName || userInfo?.username || '用户' }}</text>
        <text class="user-type">{{ getUserTypeText(userInfo?.userType) }}</text>
        <text class="user-id">ID: {{ userInfo?.userId || '--' }}</text>
      </view>
    </view>

    <!-- 个人信息详情 -->
    <view class="info-section">
      <view class="section-title">
        <uni-icons type="person" size="20" color="#2E7D32"></uni-icons>
        <text>个人信息</text>
      </view>
      
      <view class="info-list">
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="person" size="18" color="#666"></uni-icons>
            <text>用户名</text>
          </view>
          <text class="info-value">{{ userInfo?.username || '--' }}</text>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="person" size="18" color="#666"></uni-icons>
            <text>真实姓名</text>
          </view>
          <text class="info-value">{{ userInfo?.realName || '--' }}</text>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="email" size="18" color="#666"></uni-icons>
            <text>邮箱</text>
          </view>
          <text class="info-value">{{ userInfo?.email || '未设置' }}</text>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="phone" size="18" color="#666"></uni-icons>
            <text>手机号</text>
          </view>
          <text class="info-value">{{ userInfo?.phone || '未设置' }}</text>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="gear" size="18" color="#666"></uni-icons>
            <text>用户类型</text>
          </view>
          <view class="user-type-badge" :class="getUserTypeClass(userInfo?.userType)">
            <text>{{ getUserTypeText(userInfo?.userType) }}</text>
          </view>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="checkmarkempty" size="18" color="#666"></uni-icons>
            <text>账户状态</text>
          </view>
          <view class="status-badge" :class="userInfo?.status === 1 ? 'active' : 'inactive'">
            <text>{{ userInfo?.status === 1 ? '正常' : '禁用' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间信息 -->
    <view class="time-section">
      <view class="section-title">
        <uni-icons type="calendar" size="20" color="#2E7D32"></uni-icons>
        <text>时间信息</text>
      </view>
      
      <view class="info-list">
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="calendar" size="18" color="#666"></uni-icons>
            <text>注册时间</text>
          </view>
          <text class="info-value">{{ formatDate(userInfo?.createTime) }}</text>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="refresh" size="18" color="#666"></uni-icons>
            <text>更新时间</text>
          </view>
          <text class="info-value">{{ formatDate(userInfo?.updateTime) }}</text>
        </view>
        
        <view class="info-item">
          <view class="info-label">
            <uni-icons type="clock" size="18" color="#666"></uni-icons>
            <text>最后登录</text>
          </view>
          <text class="info-value">{{ formatDate(userInfo?.lastLoginTime) || '从未登录' }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="action-btn edit-btn" @click="editProfile">
        <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
        <text>编辑资料</text>
      </button>
      
      <button class="action-btn change-pwd-btn" @click="changePassword">
        <uni-icons type="locked" size="20" color="#ffffff"></uni-icons>
        <text>修改密码</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useUserStore } from '@/stores/user.js'

// 使用用户状态管理
const userStore = useUserStore()

// 获取用户信息
const userInfo = computed(() => userStore.getUserInfo)

// 页面加载时刷新用户信息
onMounted(() => {
  // 如果没有用户信息，使用测试数据
  if (!userInfo.value) {
    userStore.updateUserInfo({
      userId: 11,
      username: "xiaochai",
      realName: "用户xiaochai",
      email: null,
      phone: null,
      avatar: "https://c-ssl.dtstatic.com/uploads/blog/202307/16/P5Sln68QSbDENjg.thumb.400_0.jpeg",
      status: 1,
      userType: 3,
      lastLoginTime: null,
      createTime: "2025-09-22T00:35:51.000+00:00",
      updateTime: "2025-09-22T00:51:10.000+00:00"
    })
  }
  refreshUserInfo()
})

// 刷新用户信息
const refreshUserInfo = async () => {
  if (userInfo.value?.username) {
    const result = await userStore.fetchUserInfo(userInfo.value.username)
    if (!result.success) {
      uni.showToast({ title: '获取用户信息失败', icon: 'none' })
    }
  }
}

// 获取用户类型文本
const getUserTypeText = (userType) => {
  const typeMap = {
    1: '管理员',
    2: '政府用户',
    3: '普通用户'
  }
  return typeMap[userType] || '普通用户'
}

// 获取用户类型样式类
const getUserTypeClass = (userType) => {
  const classMap = {
    1: 'admin',
    2: 'government',
    3: 'normal'
  }
  return classMap[userType] || 'normal'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '--'
  
  try {
    const date = new Date(dateString)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    
    return `${year}-${month}-${day} ${hours}:${minutes}`
  } catch (error) {
    return '--'
  }
}

// 更换头像
const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      // 这里可以上传头像到服务器
      uni.showToast({ title: '头像上传功能开发中', icon: 'none' })
    }
  })
}

// 编辑资料
const editProfile = () => {
  uni.navigateTo({
    url: '/pages/profile/edit-profile'
  })
}

// 修改密码
const changePassword = () => {
  uni.navigateTo({
    url: '/pages/profile/change-password'
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fffe 0%, #e8f5f0 100%);
  padding: 20rpx;
}

.header-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(46, 125, 50, 0.1);
  display: flex;
  align-items: center;
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #2E7D32;
}

.default-avatar {
  background: linear-gradient(135deg, #2E7D32, #4CAF50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background: #2E7D32;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #ffffff;
}

.user-basic-info {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10rpx;
  display: block;
}

.user-type {
  font-size: 24rpx;
  color: #2E7D32;
  margin-bottom: 8rpx;
  display: block;
}

.user-id {
  font-size: 20rpx;
  color: #7f8c8d;
}

.info-section, .time-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(46, 125, 50, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  text {
    margin-left: 10rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #2c3e50;
  }
}

.info-list {
  padding: 0 30rpx 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  display: flex;
  align-items: center;
  
  text {
    margin-left: 10rpx;
    font-size: 26rpx;
    color: #666;
  }
}

.info-value {
  font-size: 26rpx;
  color: #2c3e50;
  max-width: 400rpx;
  text-align: right;
}

.user-type-badge, .status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
}

.user-type-badge {
  &.admin {
    background: #e74c3c;
    color: #ffffff;
  }
  
  &.government {
    background: #f39c12;
    color: #ffffff;
  }
  
  &.normal {
    background: #95a5a6;
    color: #ffffff;
  }
}

.status-badge {
  &.active {
    background: #27ae60;
    color: #ffffff;
  }
  
  &.inactive {
    background: #e74c3c;
    color: #ffffff;
  }
}

.action-section {
  padding: 20rpx 0;
}

.action-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  border: none;
  
  text {
    margin-left: 10rpx;
  }
}

.edit-btn {
  background: linear-gradient(135deg, #2E7D32, #4CAF50);
  color: #ffffff;
  box-shadow: 0 4rpx 20rpx rgba(46, 125, 50, 0.3);
}

.change-pwd-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: #ffffff;
  box-shadow: 0 4rpx 20rpx rgba(52, 152, 219, 0.3);
}
</style>
